<template>
    <div>
        <el-steps :active="3" simple>
            <el-step title="学生自评申请"></el-step>
            <el-step title="班级审核"></el-step>
            <el-step title="班内公示"></el-step>
            <el-step title="学院复审"></el-step>
            <el-step title="学校核定"></el-step>
        </el-steps>
        <div style="width: 60%;margin-top: 40px;">
            <h4>学院：</h4>
            <el-descriptions :title=college :column=2 :colon=false>
                <el-descriptions-item label="复审开始时间：">{{Review_start_time}}</el-descriptions-item>
                <el-descriptions-item label="平均综测分：">{{Avg_com_score}}</el-descriptions-item>
                <el-descriptions-item label="复审结束时间：">{{Review_over_time}}</el-descriptions-item>
            </el-descriptions>
            <div class="right">
                <div class="shenhe">已审核班级：5</div>
                <div class="shenhe">待审核班级：2</div>
                <div class="shenhe"
                    style="background-color:blue;position: absolute;top: 40px;right: -200px ;color: aliceblue; font-size: 16px;">
                    {{student_list_status}}
                </div>
            </div>
        </div>
        <!-- <el-descriptions  column = 1 labelstyle="{margin-left:auto}">
            <el-descriptions-item label="已审核人数">5</el-descriptions-item>
            <el-descriptions-item label="待审核人数" >2</el-descriptions-item>
        </el-descriptions> -->



        <template>
            <div class="form1">
                <el-table :data="tableData.slice((paginations.currentPage-1)*paginations.PageSize,paginations.currentPage*paginations.PageSize)" border v-loading=false style="width: 88%" :fit=false>
                    <el-table-column prop="index" label="序号" width="50" type="index">
                    </el-table-column>
                    <el-table-column prop="stu_num" label="学号" width="120">
                    </el-table-column>
                    <el-table-column prop="class_name" label="班级名" width="80">
                    </el-table-column>
                    <el-table-column prop="profession_name" label="专业名" width="80">
                    </el-table-column>
                    <el-table-column prop="content" label="内容" width="180">
                    </el-table-column>
                    <el-table-column prop="cl_new_time" label="更新时间" width="180">
                    </el-table-column>
                    <el-table-column prop="status" label="状态" width="100">
                    </el-table-column>
                    <el-table-column prop="sh_result" label="审核结果" width="100">
                    </el-table-column>
                    <el-table-column label="操作" width="200">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                            <el-button type="text" size="small">审核</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="paginations.currentPage" :page-sizes="paginations.pageSizes"
                        :page-size="paginations.PageSize" layout="total, sizes, prev, pager, next, jumper"
                        :total="tableData.length">
                    </el-pagination>
                </div>
            </div>
        </template>
    </div>

</template>
<script>
import ReviewVue from './Review.vue';

export default {
    name: 'Student_list',
    data() {
        return {
            font: '学院：',
            college: this.$store.state.com_data.college,
            Review_start_time: '2022.11.01',
            Review_over_time: '2022.11.05',
            Avg_com_score: 65,
            student_list_status: '审核中',
            tableData: [{
                stu_num: '2013456',
                class_name: '计科一班',
                profession_name: '计科',
                cl_new_time: '2022.10.01',
                content: '2022-2023综合测评',
                status: '审核中',
                sh_result: '通过'
            }
            ],
            paginations:{
              // 默认显示第几页
              currentPage:1,
              // 个数选择器（可修改）
              pageSizes:[1,2,3,4],
              // 默认每页显示的条数（可修改）
              PageSize:4,
            },

        }
    },
    methods: {
        handleClick(row) {
            console.log(row)
        },
        // 每页显示多少条
        handleSizeChange(val) {
            // 改变每页显示的条数
            this.paginations.PageSize = val
            // 注意：在改变每页显示的条数时，要将页码显示到第一页
            this.paginations.currentPage = 1
            console.log(`每页 ${val} 条`);
        },
        // 现在显示当前页的第几页
        handleCurrentChange(val) {
            // 改变默认的页数
            this.paginations.currentPage = val
            console.log(`当前页: ${val}`);
        },
    },

    // 获取数据的接口
    mounted(){
        this.$axios.get('').then(res=>{
            // console.log(res.data);
        })
      if(window.sessionStorage.getItem("status")!=0)
        this.$router.push('/Error1')
    }
}
</script>
<style scoped>
.left {
    float: left;
}

.right {
    position: absolute;
    top: -10%;
    left: 100%;
    font-family: “Microsoft YaHei”;
    padding: 10px;
}

.shenhe {
    width: 180px;
    height: 50px;
    font-size: 14px;
    text-align: center;
    line-height: 50px;
    margin-bottom: 4px;
    border: 2px solid #ccc;
}

.form1 {
    top: 40px;
    width: 100%;
}

.select_first {
    width: 150px;
    height: 30px;
    border: 1px solid #ccc;
    outline: medium
}

.rank {
    display: inline-block;
    padding: 4px;
    font-size: 14px;
    margin-right: 3px;
    border-radius: 1px;
    background-color: skyblue;
}
</style>
